<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="80px" class="base-search-more">
       <el-row>
        <el-col :span="6">
          <el-form-item label="区域" v-if="$store.state.showAgent">
            <el-select style="width:100%" v-model="form.agentId" filterable default-first-option
                       placeholder="--区域--" @change="$refs.pagination.handleSizeChange(10)">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ?18 : 24" style="text-align: right">
          <el-form-item>
            <router-link :to='{path:"/main/fwbeset/check",query:{aid:form.agentId}}'>
              <el-button type="primary" plain icon="el-icon-plus">添加方案</el-button>
            </router-link>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row type='flex' style='line-height: 32px'>
              <el-col :span='6'><span style='font-weight:600'>基础距离：</span>{{props.row.basedistance}}KM</el-col>
              <el-col :span='6'><span style='font-weight:600'>基础时长：</span>{{props.row.basictime}}分</el-col>
              <el-col :span='6'><span style='font-weight:600'>代购基础配送费:</span>{{props.row.daigoubasecost}}元</el-col>
              <el-col :span='6'><span style='font-weight:600'>取送件基础配送费:</span>{{props.row.qusongjianbasecost}}元</el-col>
            </el-row>
            <el-row type='flex' style='line-height: 32px'>
              <el-col :span='6'>
                <span style='font-weight:600'>超出距离附加费:</span>
                <el-row style='text-indent: 2em' v-for='(item,index) in props.row.paotuiCostDistanceList' :key='index'>
                  超出{{item.startdistance}}-{{item.enddistance}}KM部分，每公里加收{{item.fee}}元
                </el-row>
              </el-col>
              <el-col :span='6'>
                <span style='font-weight:600'>超出距离附加费:</span>
                <el-row style='text-indent: 2em' v-for='(item,index) in props.row.paotuiCostWeightList' :key='index'>
                  超出{{item.startweight}}-{{item.endweight}}KM部分，每千克加收{{item.fee}}元
                </el-row>
              </el-col>
              <el-col :span='6'>
                <span style='font-weight:600'>特需时段附加费:</span>
                <el-row style='text-indent: 2em' v-for='(item,index) in props.row.paotuiCostTimeList' :key='index'>
                  {{item.startDate}}-{{item.endDate}}时间内，每单收费{{item.fee}}元
                </el-row>
              </el-col>
              <el-col :span='6'>
                <span style='font-weight:600'>加时规则：</span>
                每{{props.row.overtimedistance}}KM(公里){{props.row.overtimetime}}分钟
              </el-col>
            </el-row>

          </template>
        </el-table-column>
        <el-table-column prop="agentname" label="区域" width="100" align="center"></el-table-column>
        <el-table-column prop="basedistance" label="基础距离(km)" min-width="100" align="center"></el-table-column>
        <el-table-column prop="basictime" label="基础时长(分)" min-width="100" align="center"></el-table-column>
        <el-table-column prop="daigoubasecost" label="代购基础配送费(元)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="qusongjianbasecost" label="取件基础配送费(元)" min-width="120" align="center"></el-table-column>
        <el-table-column label="修改时间" min-width="140" align="center">
          <template slot-scope="scope">
            {{scope.row.modifytime?scope.row.modifytime:scope.row.createtime}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-row style="text-align: center">
              <router-link :to='{path:"/main/fwbeset/check",query:{id:scope.row.id,aid:form.agentId}}'>
                <el-button class="el-text-check" type="text" >查看/修改</el-button>
              </router-link>
              <el-button class="el-text-success" v-if="scope.row.isdefault !='1'" @click="activitieOnline(scope.row)" type="text" >设为默认
              </el-button>
              <el-button  class="el-text-danger"  v-if="scope.row.isdefault !='1'" @click="deleteClass(scope.row)" type="text"  style="margin-left:0">删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable"></pt-table-loading>
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent"></pt-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogTableVisible: false, // 控制打开添加或修改对话框
        addOrEdit: '', // 添加/修改 文本提示
        issubmitLoading: false, // 添加/修改等待
        isloadingTable: false, // 表单等待
        form: {
          agentId: ''
        },
        params: {
          size: 10,
          page: 0,
        },
        tableData: {} // 表单数据
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.form.agentId = val[0].id
            this.getTableList()
          }
        },
        deep: true
      }
    },
    methods: {
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      },
      activitieOnline(row) { //设为默认
        this.isloadingTable = true
        let params = {id: row.id, agentId: row.agentid}
        this.$http.get('/server/paotui/cost/setToDefault?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.getTableList(this.form.agentId)
          }
        }).finally(() => { this.isloadingTable = false })
      },
      deleteClass(row){ //删除
        this.isloadingTable = true
        let params = {id: row.id, agentId: row.agentid}
        this.$http.get('/server/paotui/cost/delete?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            if(this.tableData.list.length =='1'){
              this.$refs.pagination.handleSizeChange(10)
            } else{
              this.getTableList()
            }
          }
        }).finally(() => { this.isloadingTable = false })
      },
      getTableList() { //显示列表
        this.isloadingTable = true
        const params = { ...this.form }
        this.$http.get('/server/paotui/cost/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.form.agentId = this.restaurants[0].id
        this.getTableList()
      }
    },
  }
</script>
<style scoped>

  .header {
    padding: 10px 15px;
    line-height: 30px;
    background: #fff;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .main {
    border-top: 1px solid #e5e5e5;
    background: #fff;
    padding: 0 15px 20px 15px;
  }

  .main .big-title {
    line-height: 32px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .main .change {
    line-height: 100px;
  }

  .main .formmet {
    margin-top: 20px;
  }

  .main .show-list li {
    line-height: 50px;
  }

  .main .show-list li .left-p {
    margin-right: 4px;
    float: left;
  }

  .main .show-list li .center-p {
    float: left;
  }

  .main .show-list li .right-p {
    float: right;
  }

  .main .show-list li .reat-p {
    float: left;
    margin-left: 30px;
    border-radius: 100%;
    overflow: hidden;
  }

  .main .show-list li .reat-p .clear {
    border-radius: 100%;
    padding: 3px 3px;
  }

  .preview {
    margin: 20px 0;
  }

  .preview .wrap .title {
    font-size: 16px;
    font-weight: 500;
  }

  .preview .wrap ul li {
    line-height: 32px;
    width: 180px;
    color: #6d6c6c;
  }

  .preview .wrap ul li .right {
    float: right;
  }

  .operation {
    margin-top: 20px;
  }
</style>
